<template>
    <div class="vantX6" ref="vantExample"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Graph, Shape } from '@antv/x6';
import icon from './icon.jpg';
import {
    X6_NODE_NAME,
    NODE,
    X6_EDGE_NAME,
    EDGE
} from './dag-config';
const data = {
    // 节点
    nodes: [
        {
            id: 'node1', // String，可选，节点的唯一标识
            x: 40,       // Number，必选，节点位置的 x 值
            y: 40,       // Number，必选，节点位置的 y 值
            label: 'hello', // String，节点标签
        },
        {
            id: 'node2', // String，节点的唯一标识
            x: 160,      // Number，必选，节点位置的 x 值
            y: 180,      // Number，必选，节点位置的 y 值
            label: 'world', // String，节点标签
        },
    ],
    // 边
    edges: [
       
    ],
};
let vantExample = ref();
let graph = ref();
const initGraph = () => {
    const _graph = new Graph({
        container: vantExample.value,
        scaling: {
            min: 0.2,
            max: 2
        },
        mousewheel: {
            enabled: true,
            modifiers: ['ctrl', 'meta']
        },
        grid: {
            size: 10,
            visible: true
        },
        // minimap: {
        //     enabled: true,
        //     container: minimap.value,
        //     scalable: false,
        //     width: 200,
        //     height: 120
        // },
        // interacting: {
        //     edgeLabelMovable: false,
        //     nodeMovable: !readonly.value,
        //     magnetConnectable: !readonly.value
        // },
        connecting: {
            // Whether multiple edges can be created between the same start node and end
            allowMulti: false,
            // Whether a point is allowed to connect to a blank position on the canvas
            allowBlank: false,
            // The start node and the end node are the same node
            allowLoop: false,
            // Whether an edge is allowed to link to another edge
            allowEdge: false,
            // Whether edges are allowed to link to nodes
            allowNode: true,
            // Whether to allow edge links to ports
            allowPort: false,
            // Whether all available ports or nodes are highlighted when you drag the edge
            highlight: true,
            createEdge() {
                return graph.value?.createEdge({
                    shape: X6_EDGE_NAME
                })
            },
            validateConnection(data) {
                const { sourceCell, targetCell } = data
                if (
                    sourceCell &&
                    targetCell &&
                    sourceCell.isNode() &&
                    targetCell.isNode()
                ) {
                    const sourceData = sourceCell.getData()
                    if (!sourceData) return true
                    if (sourceData.taskType !== 'CONDITIONS') return true
                    const edges = graph.value?.getConnectedEdges(sourceCell)
                    if (!edges || edges.length < 2) return true
                    let len = 0
                    return !edges.some((edge) => {
                        if (edge.getSourceCellId() === sourceCell.id) {
                            len++
                        }
                        return len > 2
                    })
                }
                return true
            },
            validateEdge({ edge }) {
                const sourceData = edge.getSourceNode()?.getData()
                const targetData = edge.getTargetNode()?.getData()
                edge?.setAttrs({
                    line: {
                        strokeDasharray:
                            sourceData?.taskExecuteType === 'STREAM' ||
                                targetData?.taskExecuteType === 'STREAM'
                                ? '5 5'
                                : 'none'
                    }
                })
                return true
            }
        },
        highlighting: {
            nodeAvailable: {
                name: 'className',
                args: {
                    className: 'available'
                }
            },
            magnetAvailable: {
                name: 'className',
                args: {
                    className: 'available'
                }
            },
            magnetAdsorbed: {
                name: 'className',
                args: {
                    className: 'adsorbed'
                }
            }
        }
    })
    graph.value = _graph;
    Graph.registerNode(X6_NODE_NAME, NODE);

    data.nodes.map(node => {
        graph.value.addNode({
            ...node,
            attrs: {
                title: {
                    text: node.label
                },
                image: {
                    'xlink:href': icon
                },
                rect: {
                    fill: "#f4f4f4"
                }
            },
            shape: X6_NODE_NAME,
        });
    })

    Graph.registerEdge(X6_EDGE_NAME, EDGE);
    data.edges.map(edge => {
        graph.value.addEdge({
            shape: X6_EDGE_NAME,
            source: {
                cell: edge.source
            },
            target: {
                cell: edge.target
            },
            labels: edge.label ? [edge.label] : undefined,
            attrs: {
                line: {
                    strokeDasharray: edge.isStream ? '5 5' : 'none'
                }
            }
        })
    })



}



onMounted(() => {
    initGraph();
})
</script>

<style lang="less" scoped>
.vantX6 {
    width: 100%;
    height: 100vh;
}
</style>